<template>
	<div>
		<van-nav-bar :border="false" title="资料设置" left-arrow @click-left="onClickLeft" />
		<div class="su_view">
			
			<div class="su_item su_itemh">
				<span>头像</span>
				<div class="uploadDiv">
					<img :src="userData.avatar == null ? myApp.srcPath('user-head.png') : this.myApp.GetDomaiName() + userData.avatar" alt="">
					<input @change="upLoad($event)" type="file" value="" />
				</div>
			</div>
			
			<div class="su_item su_itemt">
				<span>帐户</span>
				<div>
					{{userData.mobile}}
				</div>
			</div>
			
			<div class="su_item su_itemt">
				<span>真实姓名</span>
				<div>
					{{userData.mobile == null ? '暂无' : userData.sm_realname}}
				</div>
			</div>
			
		</div>
	</div>

</template>

<script>
	import Vue from 'vue';
	import {
		NavBar,
		Toast
	} from 'vant';

	import {UpLoad,UpHead,UserInfo} from '../serve/api.js'

	Vue.use(NavBar);

	export default {
		created(){
			
			//如果有缓存数据则读取缓存数据 无 则调接口
			if(this.$store.state.userData != null){
			
				this.userData = this.$store.state.userData
			
			}else{
				
				this.UserInfo()
				
			}
			
		},
		
		data(){
			
			return{
				
				headUrl:"",
				
				userData:""
			}
			
		},
		methods: {
			
			
			//用户信息
			UserInfo(){
				
				// alert(2)
				
				let params;
				
				UserInfo(params, (res) => {
					
					// console.log(res.data.data)
					
					if(res.data.code == 1){
					
						this.userData = res.data.data
						
						//存入缓存
						this.$store.state.userData = res.data.data
						
					}
					
				},(error) => {
					
					
				})
				
			},
			
			//修改头像
			UpHead(url){
				
				let params = {
					
					avatar:url
				}
				
				UpHead(params,(res) => {
					
					Toast(res.data.msg);
					
					if(res.data.code == 1){
						
						this.userData.avatar =  url
						
						//更新缓存中的用户头像
						this.$store.state.userData.avatar =  url
						
					}
					
				},(error) => {
					
					console.log(error)
					
					Toast(error);
					
				})
				
			},
			
			
			//上传图片
			upLoad(e){
				
				// console.log(e.target.files[0])
				
				let params = new FormData();
				
				params.append('file' , e.target.files[0])
				
				return UpLoad(params,(res) => {
					
					if(res.data.code == 1){
						
						this.UpHead(res.data.info)
						
					}
					
					Toast(res.data.msg);
					
				},(error) => {
					
					console.log(error)
					
					Toast(res.data.msg);
					
				})
			},
			
			onClickLeft() {
				// Toast('返回');
				this.$router.go(-1)
				
			},
			onClickRight() {
				Toast('按钮');
			},
		},
	};
</script>

<style scoped="">
	.uploadDiv input{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
	
	.uploadDiv{
		position: relative;
		
	}
	
	.uploadDiv img{
		border-radius: 50%;
		
	}
	
	.su_view{
		font-size: .28rem;
		padding: 0rem 0.25rem;
		box-sizing: border-box;
	}
	
	.su_item{
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: .25rem .25rem;
		box-sizing: border-box;
	}
	
	.su_item img{
		width: 1.12rem;
		height: 1.12rem;
	}
	
	.su_itemt{
		padding-top: .5rem;
	}
</style>
